// 因为每一列都是使用div,div单独占一行,使用浮动时才能在一行中实现多列的效果
.el-col {
    float: left;
    // 默认情况下为IE盒子模型,修改为标准盒模型
    box-sizing: border-box;
}

// 指定一行的宽度是多少
@for $i from 0 through 24 {

    // 指定一列所占的宽度为多少
    .el-col-#{$i} {
        width: $i/24 * 100%;
    }

    //指定一列的左边距为多少
    .el-col-offset-#{$i} {
        margin-left: $i/24 * 100%;
    }

    // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
    .el-col-push-#{$i} {
        position: relative;
        left: $i/24 * 100%;
    }

    // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
    // margin权重高于定位
    .el-col-pull-#{$i} {
        position: relative;
        right: $i/24 * 100%;
    }
}

// 处理响应式
@media only screen and (max-width: (768px - 1)) {
    @for $i from 0 through 24 {

        // 处理span为0的情况
        .el-col-xs-0 {
            display: none;
        }

        // 指定一列所占的宽度为多少
        .el-col-xs-#{$i} {
            width: $i/24 * 100%;
        }

        //指定一列的左边距为多少
        .el-col-xs-offset-#{$i} {
            margin-left: $i/24 * 100%;
        }

        // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
        .el-col-xs-push-#{$i} {
            position: relative;
            left: $i/24 * 100%;
        }

        // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
        // margin权重高于定位
        .el-col-xs-pull-#{$i} {
            position: relative;
            right: $i/24 * 100%;
        }
    }
}

// 处理响应式
@media only screen and (min-width: 768px) {
    @for $i from 0 through 24 {

        // 处理span为0的情况
        .el-col-sm-0 {
            display: none;
        }

        // 指定一列所占的宽度为多少
        .el-col-sm-#{$i} {
            width: $i/24 * 100%;
        }

        //指定一列的左边距为多少
        .el-col-sm-offset-#{$i} {
            margin-left: $i/24 * 100%;
        }

        // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
        .el-col-sm-push-#{$i} {
            position: relative;
            left: $i/24 * 100%;
        }

        // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
        // margin权重高于定位
        .el-col-sm-pull-#{$i} {
            position: relative;
            right: $i/24 * 100%;
        }
    }
}

@media only screen and (min-width: 992px) {
    @for $i from 0 through 24 {

        // 处理span为0的情况
        .el-col-md-0 {
            display: none;
        }

        // 指定一列所占的宽度为多少
        .el-col-md-#{$i} {
            width: $i/24 * 100%;
        }

        //指定一列的左边距为多少
        .el-col-md-offset-#{$i} {
            margin-left: $i/24 * 100%;
        }

        // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
        .el-col-md-push-#{$i} {
            position: relative;
            left: $i/24 * 100%;
        }

        // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
        // margin权重高于定位
        .el-col-md-pull-#{$i} {
            position: relative;
            right: $i/24 * 100%;
        }
    }
}

@media only screen and (min-width: 1200px) {
    @for $i from 0 through 24 {

        // 处理span为0的情况
        .el-col-lg-0 {
            display: none;
        }

        // 指定一列所占的宽度为多少
        .el-col-lg-#{$i} {
            width: $i/24 * 100%;
        }

        //指定一列的左边距为多少
        .el-col-lg-offset-#{$i} {
            margin-left: $i/24 * 100%;
        }

        // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
        .el-col-lg-push-#{$i} {
            position: relative;
            left: $i/24 * 100%;
        }

        // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
        // margin权重高于定位
        .el-col-lg-pull-#{$i} {
            position: relative;
            right: $i/24 * 100%;
        }
    }
}

@media only screen and (min-width: 1926px) {
    @for $i from 0 through 24 {

        // 处理span为0的情况
        .el-col-xl-0 {
            display: none;
        }

        // 指定一列所占的宽度为多少
        .el-col-xl-#{$i} {
            width: $i/24 * 100%;
        }

        //指定一列的左边距为多少
        .el-col-xl-offset-#{$i} {
            margin-left: $i/24 * 100%;
        }

        // 指定每一列向右移动的距离,注意使用push可能会导致出现列叠加的情况
        .el-col-xl-push-#{$i} {
            position: relative;
            left: $i/24 * 100%;
        }

        // 指定每一列向左移动的距离,可能会导致出现列叠加的情况,除此以外还会与margin存在冲突问题,
        // margin权重高于定位
        .el-col-xl-pull-#{$i} {
            position: relative;
            right: $i/24 * 100%;
        }
    }
}